<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/header.css">
    <title>游戏资讯</title>
    <style>

        nav li:hover {
            background-color: #8c8c8c;
        }

        a {
            color: white;
        }

        body {
            font: 24px Helvetica;
            background: url("[[@{/blog}]]/img/bgimgx.jpg") no-repeat fixed;
        }

        .all {
            width: 100%;
            height: 100%;
            position: absolute;
        }

        .header {
            width: 100%;
            /*溢出 */
            overflow: auto;
        }

        .search {
            overflow: auto;
            float: left;
            display: table-cell;
            margin-left: 30%;
            margin-top: 2%;
        }

        .search input {
            float: left;
            flex: 4px;
            height: 60px;
            width: 400px;
            outline: none;

        }

        .search-button {
            height: 60px;
            width: 80px;
        }

        .publish-box {
            float: right;
            display: table;
            margin-right: 10%;
            margin-top: 2%;
        }

        .main {

            min-height: 500px;
            margin: 0px;
            padding: 0px;
            /*设置该div为一个弹性盒容器*/
            display: flex;
            /*子元素按横轴方向排列*/
            flex-flow: row;
            position: absolute;
            top: 25%;
            left: 0;
        }

        .main .article {
            margin: 4px;
            padding: 5px;
            border-radius: 7pt;
            background: rgba(169, 153, 159, 0.2);
            /*用数字分配宽度 ，将容器分为5分 占3份*/
            flex: 3;
            /*排序为第二个元素*/
            order: 2;
        }

        .main .nav {
            margin: 4px;
            padding: 5px;
            border-radius: 7px;
            background: rgba(169, 153, 159, 0.2);
            /*用数字分配宽度 ，将容器分为5分 占1份*/
            flex: 1;
            /*排序为第一个元素*/
            order: 1;
        }

        .main .aside {
            margin: 4px;
            padding: 5px;
            border-radius: 7px;
            background: rgba(169, 153, 159, 0.2);
            /*用数字分配宽度 ，将容器分为5分 占1份*/
            flex: 1;
            /*排序为第三个元素*/
            order: 3;
        }

        @media all and (max-width: 640px) {
            .main {
                /*弹性盒子的子元素按纵轴方向排列*/
                flex-flow: column;
            }

            .main > article, .main > nav, .main > aside {
                /*将子元素设置为同一个值，值按自然顺序排列*/
                order: 0;
            }

            .main > nav, .main > aside, header, footer {
                min-height: 50px;
                max-height: 50px;
            }

        }

        .inform {
            margin-top: 20px;
            margin-bottom: 20px;
        }

        a:hover, a:visited, a:link, a:active {
            text-decoration: none;
        }

        ul, li {
            list-style: none;
        }
    </style>
</head>
<body>
<div class="all">
    <!--导航栏-->
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">EVE空间站</a>
            </div>
            <div>
                <ul class="nav navbar-nav">
                    <li class="active">
                        <a th:href="@{/index}">首页</a>
                    </li>
                    <li>
                        <a th:href="@{/game-information}">游戏资讯</a>
                    </li>
                    <li>
                        <a th:href="@{/}">游戏攻略</a>
                    </li>
                    <li>
                        <a th:href="@{/imgshow}">壁纸欣赏</a>
                    </li>
                    <li>
                        <a href="#">游戏工具</a>
                    </li>
                    </li>
                    <li>
                        <a th:href="@{login}">登录注册</a>
                    </li>

                </ul>
            </div>
        </div>
    </nav>
    <div class="header">
        <!--搜索文章-->
        <div class="search">
            <input type="text" placeholder="请输入..." name="" id="" value=""/>
            <button class="search-button"><i>搜索</i></button>
        </div>
        <!--发布文章-->
        <div class="publish-box">
            <a class="publish-button" href="https://www.baidu.com/" target="_blank"><img border="0"
                                                                                         src="img/发布.png"></a>
        </div>
    </div>
    >
    <div class="main">
        <div class="nav">
            <!--右侧边栏-->
            <div class="warp-left">
                <a href="https://www.baidu.com">百度文库</a>
            </div>
        </div>
        <!--资讯列表-->
        <div class="article">

            <div class="inform">
                <ul class="list">
                    <li>
                        <a title="新手起航礼包限时上架公告" href="https://evepc.163.com/news/official/20200921/29096_906024.html"
                           target="_blank">
                            <p class="lisde>">
                                <span class="time">09-21</span>
                                <span class="title">新手启航礼包限时上架公告</span><br>
                                <span class="comment">尊敬的舰长：9月21日例行维护后，新伊甸商城将限时上架新手启航礼包，上架期间，每个账号限购一次，请各位舰长适度娱乐，理性消费。</span>
                            </p>
                        </a>

                    </li>

                </ul>
            </div>
            <div class="inform">
                <ul class="list">
                    <li>
                        <a title="违规账号处理公告" href="https://evepc.163.com/news/official/20200925/29096_906974.html"
                           target="_blank">
                            <p class="lisde>">
                                <span class="time">09-21</span>
                                <span class="title">违规账号处理公告</span><br>
                                <span class="comment">为了维护游戏环境的公平性、保护所有正常参与游戏的玩家的利益，运营团队对此将始终保持零容忍态度，并且有权根据相关协议与条款对违规账号执行包括永久封停账号在内的处理措施。</span>
                            </p>
                        </a>

                    </li>

                </ul>
            </div>
            <div class="inform">
                <ul class="list">
                    <li>
                        <a title="唯有强者才能笑到最后！4人深渊试炼场乱斗震撼来临！"
                           href="https://evepc.163.com/news/official/20200925/29096_906870.html" target="_blank">
                            <p class="lisde>">
                                <span class="time">09-21</span>
                                <span class="title">唯有强者才能笑到最后！4人深渊试炼场乱斗震撼来临！</span><br>
                                <span class="comment">在新伊甸这样冰冷无情的宇宙中，战争的结果也往往是冷酷的。由于舰船种类和参战人数的差异，战争的结果通常由双方的资源差距决定，即便是优秀的克隆飞行员也无法很难通过卓越的战斗技巧扭转战局。
在三神裔举办的全新深渊试炼场中，各位克隆飞行员终于可以在公平的规则下大展拳脚，一决高下！</span>
                            </p>
                        </a>

                    </li>

                </ul>
            </div>
            <div class="inform">
                <ul class="list">
                    <li>
                        <a title="新手起航礼包限时上架公告" href="https://evepc.163.com/news/official/20200921/29096_906024.html"
                           target="_blank">
                            <p class="lisde>">
                                <span class="time">09-21</span>
                                <span class="title">新手启航礼包限时上架公告</span><br>
                                <span class="comment">尊敬的舰长：9月21日例行维护后，新伊甸商城将限时上架新手启航礼包，上架期间，每个账号限购一次，请各位舰长适度娱乐，理性消费。</span>
                            </p>
                        </a>

                    </li>

                </ul>
            </div>
            <div class="inform">
                <ul class="list">
                    <li>
                        <a title="新手起航礼包限时上架公告" href="https://evepc.163.com/news/official/20200921/29096_906024.html"
                           target="_blank">
                            <p class="lisde>">
                                <span class="time">09-21</span>
                                <span class="title">新手启航礼包限时上架公告</span><br>
                                <span class="comment">尊敬的舰长：9月21日例行维护后，新伊甸商城将限时上架新手启航礼包，上架期间，每个账号限购一次，请各位舰长适度娱乐，理性消费。</span>
                            </p>
                        </a>

                    </li>

                </ul>
            </div>
        </div>
        <div class="aside">
            <!--左侧边栏-->
            <div class="warp-right">
                <a href="#"> 百度百科</a>
            </div>
        </div>

    </div>
</div>
</body>
</html>
